var ubahComment = GetXmlHttpObjects();

function GetXmlHttpObjects() {
	if(window.XMLHttpRequest) {
		return new XMLHttpRequest();
	}
	if(window.ActiveXObject) {
		return new ActiveXObjects("Microsoft.XMLHTTP");
	}
	return null;
}

function tambahKomen(id) {

	isi = document.getElementById("boxcomment").value;
	if(ubahComment.readyState == 4 || ubahComment.readyState == 0) {
		ubahComment.open("GET","getComment.php?act=1&isi="+isi+"&id="+id,true);
		ubahComment.onreadystatechange = function(){
			var commentXML = ubahComment.responseXML;
			if(commentXML) {
				var comment = commentXML.getElementsByTagName("comments")[0];
				id = comment.getElementsByTagName("id")[0].firstChild.nodeValue;
				time =  Math.round((new Date()).getTime() / 1000);
				user = comment.getElementsByTagName("username")[0].firstChild.nodeValue;
				avatar = comment.getElementsByTagName("avatar")[0].firstChild.nodeValue;
				comment = comment.getElementsByTagName("comment")[0].firstChild.nodeValue;
				alert(id+ "," +time+ "," +user+ "," +avatar+ "," +comment);
				addComment(id, time, user, avatar, comment);
			}
		};
		ubahComment.send(null);
	}
}

function hapusKomen(id) {

	if(ubahComment.readyState == 4 || ubahComment.readyState == 0) {
		ubahComment.open("GET","getComment.php?act=-1&isi=haha&id="+id,true);
		ubahComment.onreadystatechange = function(){
			var commentXML = ubahComment.responseText;
			if(commentXML == "success") {
				alert('haha')
				removeComment(id);
			}
		};
		ubahComment.send(null);
	}
}

function addComment(id, time, user, avatar, comment)
{
	var textarea = document.getElementById('boxcomment');
	var line = document.getElementById('line');
	
	var newcomment = document.createElement('div');
	var commContent = document.createElement('div');
	var space = document.createElement('span');
	var _time = document.createElement('span');
	var _user = document.createElement('a');
	var _avatar = document.createElement('img');
	var _comment = document.createElement('div');
	var _delete = document.createElement('button');
	
	newcomment.setAttribute('id','commentwrapper-'+id);
	commContent.setAttribute('class','comment-content');
	commContent.setAttribute('id','cc-'+id);
	space.setAttribute('id','space-'+id);
	space.setAttribute('class','space');
	_time.setAttribute('id','time-'+id);
	_time.setAttribute('class','time');
	_user.setAttribute('id','user-'+id);
	_user.setAttribute('href','?page=profile&user='+user);
	_user.setAttribute('class','commentator');
	_avatar.setAttribute('id','avatar-'+id);
	_avatar.setAttribute('class','avatar-comment');
	_avatar.setAttribute('src',avatar);
	_comment.setAttribute('id','comment-'+id);
	_comment.setAttribute('class','comment');
	_delete.setAttribute('id','delete-'+id);
	_delete.setAttribute('class','delete-comment');
	_delete.setAttribute('onclick','hapusKomen('+id+')');

	_time.innerHTML = time;
	_user.innerHTML = user;
	_comment.innerHTML = comment;
	
	commContent.appendChild(_user);
	commContent.appendChild(space);
	commContent.appendChild(_time);
	commContent.appendChild(_delete);
	commContent.appendChild(_comment);
	
	newcomment.appendChild(_avatar);
	newcomment.appendChild(commContent);
	
	textarea.value = "";
	textarea.parentNode.insertBefore(newcomment,line.nextSibling);
}

function removeComment(id) {

  var content = document.getElementById('content');

  var commentwrapper = document.getElementById('commentwrapper-'+id);
  var commentContent = document.getElementById('cc-'+id);
  var _time = document.getElementById('time-'+id);
  var _space = document.getElementById('space-'+id);
  var _user = document.getElementById('user-'+id);
  var _avatar = document.getElementById('avatar-'+id);
  var _comment = document.getElementById('comment-'+id);
  var _delete = document.getElementById('delete-'+id);

  commentContent.removeChild(_time);
  commentContent.removeChild(_user);
  commentContent.removeChild(_comment);
  commentContent.removeChild(_delete);
  commentContent.removeChild(_space);
  commentwrapper.removeChild(_avatar);
  commentwrapper.removeChild(commentContent);
  
  content.removeChild(commentwrapper)
	
}